<template>
    <view class="receivables">
        <uni-nav-bar fixed left-icon="left" title="回款数据排名" @clickLeft="backHandle" @clickRight="openHandle" class="unibarS">
            <view class="input-view">
                <u-tabs :list="list1" :current="current" @click="clickTabs"></u-tabs>
            </view>
            <block slot="right">
                <svg-icon svgPath="/static/svg/icon-shaixuan.svg" color="#0C1019" size="18px" />
			</block>
        </uni-nav-bar>

        <!-- 数据统计 柱状图 -->
        <view style="background-color: rgba(255, 255, 255, 1);">
            <view class="title">数据统计</view>
            <l-echart ref="chartColumnar"></l-echart>
        </view>
        <!-- 金额汇总 -->
        <view class="money-summary">
            <u-grid :border="false" col="2">
                <u-grid-item>
                    <view class="grid-box">
                        <text class="grid-text">回款金额</text>
                        <view class="num">￥{{ yearTotal.totalAmount }}</view>
                    </view>
                </u-grid-item>
                <u-grid-item>
                    <view class="grid-box">
                        <text class="grid-text">回款次数</text>
                        <view class="num">￥{{ yearTotal.totalCount }}</view>
                    </view>
                </u-grid-item>
            </u-grid>
        </view>
        <!-- 表格 -->
        <view>
            <uni-table ref="table"  emptyText="暂无更多数据">
                <uni-tr>
                    <uni-th width="70" align="center">排名</uni-th>
                    <uni-th v-if="personageData.performanceType == 2" width="80" align="center">名称</uni-th>
                    <uni-th v-if="personageData.performanceType == 2" width="100" align="center">所在部门</uni-th>
                    <uni-th v-if="personageData.performanceType == 1" width="100" align="center">部门名称</uni-th>
                    <uni-th width="100" align="center">成交金额</uni-th>
                    <uni-th width="100" align="center">成交次数</uni-th>
                </uni-tr>
                <uni-tr v-for="(item, index) in tableData" :key="index">
                    <uni-td align="center">{{ item.ranking }}</uni-td>
                    <uni-td v-if="personageData.performanceType == 2" align="center">{{ item.userName }}</uni-td>
                    <uni-td v-if="personageData.performanceType == 2" align="center">{{ item.deptName }}</uni-td>
                    <uni-td v-if="personageData.performanceType == 1" align="center">{{ item.deptName }}</uni-td>
                    <uni-td align="center">{{ item.totalAmount }}</uni-td>
                    <uni-td align="center">{{ item.totalCount }}</uni-td>
                </uni-tr>
            </uni-table>
            <view class="pagination">
                <view class="pagination-box">
                    <uni-pagination :total="total" @change="changePageHandle" title="标题文字" prev-text="前一页"
                        next-text="后一页" />
                </view>
            </view>
        </view>

        <!-- 筛选 -->
		<uni-popup ref="popup" type="right" border-radius="10px 10px 0 0">
			<view class="drawer-box">
				<view class="drawer-content">
					<u--form labelPosition="top" ref="uForm" labelWidth="100">
						<u-form-item label="时间" border
							ref="item1">
							<view class="drawer-classify">
								<view v-for="(item, index) in tiemList" :key="index" @click="changeTime(item.value)" :class="{ active: tempSearchObj.type == item.value }">{{ item.name }}</view>
							</view>
						</u-form-item>
						<u-form-item class="search-item-box" label="时间段" @click="openCalendar()" border ref="item1">
							<view>
								<view v-if="tempSearchObj.startTime && tempSearchObj.endTime">{{ tempSearchObj.startTime + '至' + tempSearchObj.endTime }}</view>
								<view v-else>选择范围</view>
							</view>
							<u-icon slot="right" name="clock"></u-icon>
						</u-form-item>
					</u--form>
				</view>
				<view class="drawer-footer">
					<view class="drawer-footer-res" @click="reset">重置</view>
					<view class="drawer-footer-sub" @click="submit">确定</view>
				</view>
			</view>
		</uni-popup>
		<uni-calendar ref="calendar" class="uni-calendar--hook" :range="true" :clear-date="true" :date="infoCalendar.date"
		:insert="infoCalendar.insert" @confirm="confirmCalendar" @close="closeCalendar" />

    </view>
</template>

<script>
import { calculateDateRange } from '@/common/utils'
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
export default {
    data() {
        return {
            current: 0,
            list1: [{
                name: '个人排名',
                type: 2
            }, {
                name: '部门排名',
                type: 1
            }],
            loading: false,
            personageData: {
                type: 1,
                pageNum: 1,
                pageSize: 10,
                startTime: null,
                endTime: null,
                performanceType: 2
            },
            tableData: [],
            total: 0,
            // 柱状图数据
            // 每月目标
            annualTargetData: [],
            // 每月金额
            totalAmountData: [],
            yList: [],
            yearTotal: {},
            tiemList: [
				{ name: '今年', value: 1 },
				{ name: '本季度', value: 2 },
				{ name: '上季度', value: 3 },
				{ name: '本月', value: 4 },
				{ name: '上月', value: 5 },
				{ name: '本周', value: 6 },
				{ name: '上周', value: 7 },
				{ name: '昨天', value: 8 },
				{ name: '今天', value: 9 },
			],
            tempSearchObj: {
				type: 1,
				startTime: null,
				endTime: null
			},
            infoCalendar: {
                insert: false,
                selected: []
            }
        }
    },
    created() {

        const [start, end] = calculateDateRange(1);
        this.personageData.startTime = start
        this.personageData.endTime = end

        this.getTotalMoney()
        this.getPersonage()
    },
    methods: {
        clickTabs(item) {
            this.personageData.performanceType = item.type
            // console.log(item)
            this.getTotalMoney()
            this.getPersonage()
        },
        getTotalMoney() {
            let obj = {
                startTime: this.personageData.startTime,
                endTime: this.personageData.endTime,
            }
            this.$http.get('/app/statistics/performance/personageReceivablesData', obj).then(res => {
                if (res.code == 200) {
                    this.yearTotal = res.data
                }
            })
        },
        getPersonage() {
            this.$http.get('/app/statistics/performance/personageReceivablesList', this.personageData).then(res => {
                if (res.code == 200) {
                    this.tableData = res.rows
                    this.total = res.total
                    this.yList = []
                    this.totalAmountData = []
                    this.annualTargetData = []
                    res.rows.forEach(item => {
                        if (this.personageData.performanceType == 2) {
                            // 个人
                            this.yList.push(item.userName)
                        } else if (this.personageData.performanceType == 1) {
                            // 部门
                            this.yList.push(item.deptName)
                        }
                        this.totalAmountData.push(item.totalAmount)
                    });
                    this.initChartColumnar()
                }
            })
        },
        changePageHandle(e) {
            console.log(e)
            this.personageData.pageNum = e.current
            this.getPersonage()
        },
        initChartColumnar() {
            this.$refs.chartColumnar.init(echarts, chart => {
                const option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    // legend: {
                    //     show: false,
                    //     data: ['每月目标', '每月金额']
                    // },
                    grid: {
                        top: 'top',
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: this.yList
                    },
                    series: [{
                        name: '成交金额',
                        type: 'bar',
                        barWidth: '14',
                        data: this.totalAmountData
                    }
                    ]
                }
                chart.setOption(option);

            });
        },
        backHandle() {
            uni.navigateBack()
        },
        // 打开日历
		openCalendar(type) {
			this.$refs.calendar.open()
        },
        // 确定日期
        confirmCalendar(e) {
			if(e.range.before && e.range.after) {
				let arr = []
				arr[0] = e.range.before? e.range.before : null
				arr[1] = e.range.after? e.range.after : null
				this.tempSearchObj.startTime = arr[0]
				this.tempSearchObj.endTime = arr[1]
			} else {
				this.tempSearchObj.startTime = null
				this.tempSearchObj.endTime = null
				return
			}
			this.tempSearchObj.type = null
        },
        openHandle() {
            console.log('open');
            Object.keys(this.tempSearchObj).forEach(key => {
				if (this.personageData.hasOwnProperty(key)) {
					this.tempSearchObj[key] = this.personageData[key];
				}
			});
            this.$refs.popup.open()
        },
        // 关闭日历
        closeCalendar() { },
		changeTime(type) {
			this.tempSearchObj.type = type
			const [start, end] = calculateDateRange(type);
			this.tempSearchObj.startTime = start
			this.tempSearchObj.endTime = end
		},
        submit() {
            Object.keys(this.personageData).forEach(key => {
				if (this.tempSearchObj.hasOwnProperty(key)) {
					this.personageData[key] = this.tempSearchObj[key];
				}
			});
            this.getTotalMoney()
            this.getPersonage()
            this.$refs.popup.close()
        },
        reset() {
            this.tempSearchObj.type = 1
            const [start, end] = calculateDateRange(1);
            this.tempSearchObj.startTime = start
            this.tempSearchObj.endTime = end
        }
    }
}
</script>

<style lang="scss" scoped>
.receivables {
    .input-view {
        width: 100%;

        /deep/.u-tabs__wrapper__nav__item {
            flex: 1;
        }

        /deep/.u-tabs__wrapper__nav__line {
            background: rgba(77, 172, 177, 1) !important;
        }
    }

    .title {
        padding: 16px;
        font-size: 32rpx;
        font-weight: 500;
        color: rgba(12, 16, 25, 1);
    }

    .money-summary {
        background: rgba(255, 255, 255, 1);
        margin: 32rpx 0;
        padding: 16rpx 0;
        .grid-box {
            text-align: center;
            padding: 8rpx 0;
            .grid-text {
                font-size: 24rpx;
                font-weight: 400;
                color: rgba(103, 117, 133, 1);
                margin-bottom: 14rpx;
            }
            .num {
                font-size: 28rpx;
                font-weight: 500;
                color: rgba(12, 16, 25, 1);
            }
        }
    }

    .pagination {
        display: flex;
        justify-content: center;
        padding: 20rpx 0;

        .pagination-box {
            width: 190px;
        }
    }
    .drawer-box {
        width: 622rpx;
        height: 100vh;
        display: flex;
        flex-direction: column;
        background-color: white;

        .drawer-content {
            flex: 1;
            overflow-y: auto;
            padding: 0 24rpx;

            .drawer-classify {
                display: flex;
                flex-wrap: wrap;

                >view {
                    font-size: 28rpx;
                    font-weight: 400;
                    color: rgba(103, 117, 133, 1);
                    border-radius: 16rpx;
                    background: #FFFFFFFF;
                    border: 2rpx solid #67758566;
                    padding: 16rpx 0;
                    width: 174rpx;
                    margin-right: 20rpx;
                    margin-bottom: 20rpx;
                    text-align: center;
                }

                :nth-child(3n) {
                    margin-right: 0;
                }

                .active {
                    border: none;
                    background: #4DACB1FF;
                    color: rgba(255, 255, 255, 1);
                }
            }
            .search-item-box {
                /deep/.u-form-item__body__right {
                    border: 2rpx solid rgba(103, 117, 133, 0.4);
                    padding: 16rpx 16rpx;
                    border-radius: 8rpx;
                }
            }
        }

        .drawer-footer {
            padding: 24rpx;
            display: flex;

            >view {
                border-radius: 8rpx;
                text-align: center;
                height: 44px;
                line-height: 44px;
                font-size: 32rpx;
                font-weight: 500;
            }

            .drawer-footer-res {
                height: 42px;
                width: 154rpx;
                background: #FFFFFFFF;
                border: 3rpx solid #4DACB1FF;
                color: rgba(77, 172, 177, 1);
                margin-right: 20rpx;
            }

            .drawer-footer-sub {
                flex: 1;
                background: #4DACB1FF;
                color: #FFFFFFFF;
            }
        }
    }
}
</style>